<template>
  <div style="width: 100%;height: 100%;">
    <div  style="width: 100%;height: 100%;" ref="removeShelvesRef"></div>
  </div>
</template>
<script>
import {xiaJiaTaskWeekApi,shangJiaTaskWeekApi} from '../../../api/product/index.js'
// import moment from 'moment'
export default {
  props: {
    type: {
      type: String,
      default: 'up',
    },
  },
  data() {
    return {
      list:[]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const _that = this,
        api = this.type === 'up' ? shangJiaTaskWeekApi : xiaJiaTaskWeekApi
      api({pkCorp: 1002}).then(res => {
        const {code,data} = res
        if(code === 2000) {
          _that.list = data
          if(_that.type === 'up') {
            _that.setUpOption()
          }else {
            _that.setDownOption()
          }
        }
      })
    },
    setUpOption() {
      const _that = this
      const myChart = this.$echarts.init(this.$refs.removeShelvesRef),dayList = [],waitList = [],hasDoneList = [],      planList = []
      _that.list.forEach(item => {
        dayList.push(item.day)
        waitList.push(item.dai)
        planList.push(item.jiHua)
        hasDoneList.push(item.leiJi)
      })
      const option = {
        title: {
          text: '上架任务占比',
          left:'50px',
          top: '10px',
          textStyle: {
            color: '#FFF'
          }
        },
        legend: {
          selectedMode: false,
          align: 'right',
          right: '12px',
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          top: 20,
          left: '3%',
          right: '3%',
          bottom: '5px',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: dayList,
          axisLabel: {
            color: '#aaa',
            fontSize: 10,
            interval: 0,
            // rotate: 30,
          },
          axisLine: {
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} ',
            color: '#aaa',
            fontSize: 10,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        series: [
          {
            data: waitList,
            type: 'bar',
            barWidth:"60%",
            name : "待上架",
            stack:"total",
            // label: {
            //   color: '#fff',
            //   show:true
            // }
          },
          {
            data: planList,
            type: 'bar',
            barWidth:"60%",
            name : "计划上架",
            stack:"total",
            // label: {
            //   color: '#fff',
            //   show:true
            // }
          },
          {
            data: hasDoneList,
            type: 'bar',
            barWidth:"60%",
            name : "累计上架",
            stack:"total",
            // label: {
            //   color: '#fff',
            //   show:true
            // }
          },
        ],
      }
      myChart.setOption(option)
    },
    setDownOption() {
      const _that = this
      const myChart = this.$echarts.init(this.$refs.removeShelvesRef),dayList = [],waitList = [],hasDoneList = [],      planList = []
      _that.list.forEach(item => {
        dayList.push(item.day)
        waitList.push(item.dai)
        planList.push(item.jiHua)
        hasDoneList.push(item.leiJi)
      })
      const option = {
        title: {
          text: '下架任务占比',
          left:'50px',
          top: '10px',
          textStyle: {
            color: '#FFF'
          }
        },
        legend: {
          selectedMode: false,
          align: 'right',
          right: '12px',
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          top: 20,
          left: '3%',
          right: '3%',
          bottom: '5px',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: dayList,
          axisLabel: {
            color: '#aaa',
            fontSize: 10,
            interval: 0,
            // rotate: 30,
          },
          axisLine: {
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} ',
            color: '#aaa',
            fontSize: 10,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#05358b',
            },
          },
        },
        series: [
          {
            data: waitList,
            type: 'bar',
            barWidth:"60%",
            name : "待下架",
            stack:"total",
            // label: {
            //   color: '#fff',
            //   show:true
            // }
          },
          {
            data: planList,
            type: 'bar',
            barWidth:"60%",
            name : "计划下架",
            stack:"total",
            // label: {
            //   color: '#fff',
            //   show:true
            // }
          },
          {
            data: hasDoneList,
            type: 'bar',
            barWidth:"60%",
            name : "累计下架",
            stack:"total",
            // label: {
            //   color: '#fff',
            //   show:true
            // }
          },
        ],
      }
      myChart.setOption(option)
    }

  },
}

</script>
